<app-error-message *ngIf="response && response.error">
  {{response.error.message}}
</app-error-message>
<div class="container-login">
  <div class="wrap-login" >
    <div class="success-message" *ngIf="response && response.data">
      <div class="login-header">
        {{ key }}
        <span class="success-text">Request success</span>
        <p>
          Your request has been sent successfully to the <b>{{email}}</b>. You will recieve a password change link. If you did not recieve it within
          few minutes, checkyour spam or junk mailbox
        </p>
      </div>
    </div>
    <form *ngIf="!response || !response.data">
      <div class="login-header">
        <span>Forgot Password</span>
        <p>Enter your email adress and we’ll send a link to reset your password</p>
      </div>
      <div class="form-group material-input">
        <input type="text" class="app-forget-password-email" material-input name="email" [(ngModel)]="email">
        <span class="focus-input" data-placeholder="Email"></span>
        <span class="error-message" *ngIf="error('username')">{{error('username')}}</span>
      </div>
      <div class="form-group login-button">
        <button class="btn btn-primary" (click)="requestPassword($event);">
          Request Password
        </button>
      </div>
    </form>
    <div> Maybe you want to <a routerLink="/login">Login</a> Or <a routerLink="/signup">Signup</a>.</div>
  </div>
</div>